<template>
  <a-skeleton :loading="loading" avatar :paragraph="{ rows: 4 }">
    <div class="recommend-index">
      <div class="recommend-top">
        <a-carousel autoplay>
          <div><h3>1</h3></div>
          <div><h3>2</h3></div>
          <div><h3>3</h3></div>
          <div><h3>4</h3></div>
        </a-carousel>
      </div>
      <div class="recommend-bottom">
          <div class="recommend-item">
              <!-- 空着 准备展示广告位 -->
          </div>
          <div class="recommend-item">
              <!-- 空着 准备展示广告位 -->
          </div>
      </div>
    </div>

    <div class="cl-card" v-for="item in listData" :key="item.Id">
      <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-12 cl-card-image">
          <router-link :to="{ name: 'blogdetail', params: { columnid: item.FKColumnId, blogid: item.Id }}">
            <img v-lazy="item.CoverImageUrl" class="img-fluid" alt="">
          </router-link>
        </div>
        <div class="col-lg-9 col-md-8 col-sm-12 cl-card-main">
          <h3 class="cl-card-main-title">
            <router-link :to="{ name: 'blogdetail', params: { columnid: item.FKColumnId, blogid: item.Id }}">{{item.Title}}</router-link>
          </h3>
          <div class="cl-card-main-time">       
            <span class="day">{{item.CreatedOnTime | formatDate('dd')}}</span>       
            <span class="month fs-18">{{item.CreatedOnTime | formatDate('MM')}}<span class="fs-14">月</span></span>       
            <span class="year fs-18 ml10">{{item.CreatedOnTime | formatDate('yyyy')}}</span>   
          </div>
          <p class="cl-card-main-info">{{item.ContentOverView}}</p>
            <div class="cl-card-more">
              <div class="f-fl"> 
                <router-link :to="{ name: 'blogdetail', params: { columnid: item.FKColumnId, blogid: item.Id }}">阅读更多...</router-link>
              </div>
              <div class="f-fr" style="position: relative; top: -5px;">    
                <span class="read fs-18">
                  <i class="fa fa-eye"></i>               
                  <i class="num">{{getVisitCount(item.Id)}}</i>           
                </span>      
                <span class="ml20 fs-18"> 
                  <i class="fa fa-thumbs-o-up"></i>               
                  <i class="num">{{getLikeCount(item.Id)}}</i>    
                </span>  
              </div>
            </div>
          </div>
      </div>
    </div>
    <nav aria-label="Page navigation">
      <a-pagination
        :total="totalcount"
        :pageSize="pagesize"
        v-model="page">
      </a-pagination>
    </nav>
  </a-skeleton>
</template>

<script>
import lodash from 'lodash'
import { Carousel,Pagination } from 'ant-design-vue';
import { getBlogList, getLanguageSupport } from '@/api'
export default {
  name: 'Home',
  components: {
    ACarousel : Carousel,
    APagination : Pagination 
  },
  data() {
    return {
      loading: true,
      page: 1,       //分页 当前页数
      pagesize: 10,  //分页 每页显示列数
      totalcount: 0, //后台返回分页列表记录总数
      listData: [],
      blogStatistics: [],
    };
  },
  mounted () {
    this.onLoadNewBlogList()
  },
  methods: {
    onLoadNewBlogList() {
      this.loading = true;
      let me = this;
      getBlogList(0, this.page, this.pagesize, 
        function(res) { //Success
            me.loading = false;
            me.totalcount = res.data.RecordsTotal
            me.listData = res.data.Data
            if(!lodash.isNil(res.data.BlogSettingsModel)) {
              const blogsettings = res.data.BlogSettingsModel
              me.pagesize = blogsettings.BlogArchivePageSize
            }
            if(!lodash.isEmpty(res.data.CustomProperties)) {
              const bloglistcount = res.data.CustomProperties.BlogStatistics                
              if(bloglistcount !== null)
                me.blogStatistics = bloglistcount
            }
        }, function(msg) { //Failure
            me.loading = false;
            me.$notification['error']({
                message: '通知消息',
                description: msg,
            });
        }
      );
    },
    /**
     * 后台返回以博客Id，访问数量的统计数据形如：
     * "BlogStatistics": [
     *  {
     *    "Id": 10,
     *    "VisitCount": 0,
     *    "LikeCount": 4
     *  }
     * ]
     * 遍历分页列表Id获取对应Id的统计信息
     */
    filterBlogInfo(blogid) {
      if (typeof blogid === 'string') blogid = parseInt(blogid)
      if (blogid <= 0) return null
      const bloginfo = lodash.find(this.blogStatistics, ['Id', blogid]);
      return (typeof bloginfo === 'undefined') ? null : bloginfo;
    },
    /**
     * 数据说明同filterBlogInfo
     * 遍历分页列表Id获取对应Id的浏览量
     */
    getVisitCount(blogid) {
      if (!blogid) return 0
      const bloginfo = this.filterBlogInfo(blogid)
      return (bloginfo === null) ? 0 : bloginfo.VisitCount;
    },
    /**
     * 数据说明同filterBlogInfo
     * 遍历分页列表Id获取对应Id的点赞量
     */
    getLikeCount(blogid) {
      if (!blogid) return 0
      const bloginfo = this.filterBlogInfo(blogid)
      return (bloginfo === null) ? 0 : bloginfo.LikeCount;
    },
  }
}
</script>
<style lang="less">
  .ant-carousel {
    .slick-slide {
      text-align: center;
      height: 378px;
      line-height: 378px;
      background: #364d79;
      overflow: hidden;
      h3 {
        color: #fff;
      }
    }
  }
  .ant-pagination-item-active {
    background-color: #FF9400;
    border-color: #FF9400;
    color: #fff;

    &:hover a,
    &:focus a{
      color: #fff;
    }
    a { color: #fff;}
  }
  .ant-pagination-item {
    &:hover,
    &:focus {
      border-color: #FF9400;
    }
    &:hover a,
    &:focus a{
      color: #fff;
    }
  }
  .ant-list-item-action .anticon {
    position: relative;
    top: -3px;
  }
  .ant-list-item {
    background-color: #fff;
    margin: 0 0 18px 0;
    padding-left: 10px;
    border-bottom: 1px solid #e8e8e8;
  }
  .cl-cantainer .cl-card {
    background-color: inherit;
    .row {
      margin: 0 0 18px 0;
      padding: 8px;
      background-color: #fff;
    }
  }
</style>